<style scoped lang="scss">
.munt {
    width: 100%;
    height: 736px;
    background-color: #f7f7f7;
}

.top {
    width: 100%;
    height: 125px;
    margin-top: 15px;
    background-color: white;

    div {
        float: left;
        width: 40%;
        margin-left: 20px;
        text-align: center;
        font-size: 22px;

        p:nth-child(1) {
            font-size: 28px;
        }

        p:nth-child(2) {
            font-size: 15px;
        }
    }
}



.middle {
    width: 100%;
    height: 80px;
    background-color: #fdfdfd;

    div {
        height: 72px;
        width: 90%;
        margin-left: 14px;
        ;
        background-color: #f7f7f7;
        line-height: 30px;
        font-size: 14px;

        p {
            margin-left: 10px;
            color: #999999;
        }
    }
}


.nutx {
    width: 100%;
    height: 412px;
    background-color: #fdfdfd;
    margin-top: 10px;

    .nutx-first {
        margin-top: 10px;

        span:nth-child(1) {}

        span:nth-child(2) {
            margin-left: 220px;
            color: #999999;
        }
    }

    .nutx-sented {
        width: 100%;
        height: 212px;
    }

    .nutx-threes {
        width: 96%;
        font-size: 15px;
        background-color: #f7f7f7;
        margin-left: 13px;
        line-height: 22px;
        color: #666666;
    }

}



.button {
    width: 100%;
    height: 142px;
    background-color: #fdfdfd;

    div {
        .left {
            width: 89px;
            height: 71px;
            float: left;

        }

        .right {
            width: 310px;
            height: 88px;
            float: left;
            margin-left: 6px;
            line-height: 25px;

            p:nth-child(1) {

                font-size: 16px;
            }
        }
    }
}
</style>

<template> <!-- vue实例外创建 -->
    <div class="munt">

        <div class="top">

            <div>
                <p>--</p>
                <p>运动时长</p>
            </div>

            <div>
                <p>--</p>
                <p>消耗热量(kcal)</p>
            </div>

        </div>

        <div class="middle">
            <div>
                <p>还没有您的运动记录</p>
                <p>通过智能设备上传您的运动数据,看看健康顾问怎么说</p>
            </div>
        </div>


        <div class="nutx">

            <div class="nutx-first">
                <span>近7日记录</span>
                <span @click="huysd">查看更多记录></span>
            </div>

            <div class="nutx-sented">

                <div ref="main" style="width: 400px;height:240px;"></div>
            </div>

            <div class="nutx-threes">
                <p>如果您从早到晚都佩戴手环/智能手表,可能会让你将生</p>
                <p>活步数与运动步数混淆。生活中的步行,并不能起到运动效</p>
                <p>果.要起到锻炼作用,还需要兼顾运动强度.每天应该有30分</p>
                <p>钟中等强度的运动.若你的运动方式是行走,那么要达到每</p>
                <p>分钟110~130步的步频,才算做进行了中等强度锻炼</p>
            </div>
        </div>

        <div class="button">

            <h4>智能设备</h4>
            <div>
                <div class="left">
                    <img src="../../assets/Snipaste_2024-12-25_11-18-55.png" alt="">
                </div>
                <div class="right">
                    <p>健利达动感单车Deepsmove S8 Pro</p>
                    <p>10</p>
                </div>
            </div>

        </div>
    </div>
</template>


<script setup lang="ts">

import * as echarts from 'echarts';
import { flat } from 'vant/lib/utils';
import { ref, onMounted } from 'vue'

import { useRouter } from 'vue-router'
const router = useRouter()
const main = ref<HTMLElement>()

onMounted(() => {
    // 基于准备好的dom，初始化echarts实例
    var myChart = echarts.init(main.value as HTMLElement);
    // 绘制图表
    myChart.setOption({
        xAxis: {
            type: 'category',
            data: []
        },
        yAxis: {
            type: 'value',
        },
        series: [
            {
                data: [160,20,60,40,80],
                type: 'line'
            }
        ]
    });
})


 const huysd=()=>{
     
    router.push('/More_exercise')
 }
   


</script>